<template>
  <div>
    <el-dialog title="选择评审专家" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%">
      <div class="wrapper-container">
        <div class='left'>
          <el-tree ref="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" :indent="0" lazy :load="loadNode" node-key="value"></el-tree>
          <div class="hr"></div>
        </div>
        <div class="right">
          <div class="search-container">
            <div class="search-container-item">
              <div class="item-name">搜索：</div>
              <el-input v-model="searchForm.xm" style="width: 110px" size="mini"></el-input>
            </div>
            <div class="search-button color-primary width70" @click="searchTeacher">
              <img src="../../../../assets/assessment/icon-search.png" alt="" />
              <span>查询</span>
            </div>
            <div class="choseList">
              <h1>已选：</h1>
              <div style="display:flex;flex-wrap:wrap">
                <div class="del-btn" v-for="i in selectedTeacher" :key="i.id">
                  <span>{{i.xm}}</span>
                  <span @click="delItem(i)">x</span>
                </div>
              </div>
            </div>
          </div>
          <div class="table-container table-css">
            <el-table  ref="multipleTable" :data="tableData" border style="width:100%"  @selection-change="handleSelectionChange" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
              <el-table-column type="selection" width="55"  align="center"> </el-table-column>
              <el-table-column prop="bh" label="编号" align="center"></el-table-column>
              <el-table-column prop="xm" label="姓名" align="center"></el-table-column>
              <el-table-column prop="xb" label="性别" align="center"></el-table-column>
              <el-table-column prop="jszc" label="职称" align="center"></el-table-column>
              <el-table-column prop="rwlb" label="类别" align="center" ></el-table-column>
              <el-table-column prop="gwbzlb" label="岗位编制类别" align="center" ></el-table-column>
            </el-table>
          </div>
          <div class="pagination-block">  
            <el-pagination v-if="total>50"  @current-change="currentPage" prev-text="上一页" next-text="下一页" :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
          <div class="button-group">
            <div class="" @click="save">保存</div>
            <div class="" @click="dialogVisible=false">取消</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getTeacherDepart,getTeacherList} from "@/api/student";
export default {
  name: "ChoseTeacher",
  props: {
    ruleFormProps: {
      type: {},
      required: true
    }
  },
  data(){
    return {
      dialogVisible:false,
      defaultProps: {
        children: 'children',
        label: 'deptName',
        value:'id',
        isLeaf:'leaf'
        
      },
      data: [],
      searchForm:{
        gzbm:'',
        xm:'',
        pageNo:1,
      },
      tableData: [],
      total:1,
      node_had:[],
      resolve_had:[],
      selectedTeacher:[],
      ruleFormList: {}
    }
  },
  watch: {
    ruleFormProps: {
      handler: function (val, old) {
        this.ruleFormList = val
        if (this.tableData.length) {
          for (let i = 0; i < this.tableData.length; i++) {
            const list = this.tableData[i]
            if (list.xpaasId == this.ruleFormList) {
              this.selectedTeacher = list;
            }
          }
        }
      },
    }
  },
  mounted(){
    this.getTeachers()
  },
  methods:{
    handleSelectionChange(e){
      this.selectedTeacher = e;
    },
    searchTeacher(){
      this.getTeachers();
      this.selectedTeacher = []
    },
    //当前页
    currentPage(e){
      this.searchForm.pageNo = e;
      this.searchTeacher()
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
          this.initClass(resolve,-1)
          return 
      }
      if (node.level >= 1) {
          this.initClass(resolve,node.data.id);
          return resolve([])
      }
    },
    handleNodeClick(data){
      this.searchForm.gzbm = data.deptName;
      this.getTeachers()
    },
    //获取下级部门
    async initClass(resolve,id){
      let res = await getTeacherDepart({id:id});
      if(res.code == 200){
        if(id == 0){
         let datas = res.data.filter(item=>{
            return item.deptCategory == 5
          })
          resolve(datas)
        } else {
          resolve(res.data)
        }
      }
    },
    requestNewData() {
      this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    },
    //获取教师列表
    async getTeachers(){
      let res = await getTeacherList(this.searchForm);
      this.tableData = res.data.records;
    },
    delItem(i){
      let data = this.selectedTeacher.filter(item=>i.id !== item.id);
      this.selectedTeacher = data;
      this.$refs.multipleTable.clearSelection();
      data.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    },
    save(){
      this.dialogVisible = false;
      this.$emit('selectedT',this.selectedTeacher)
    }
  }
};
</script>

<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.search-container {
  justify-content: flex-start!important;
}
.wrapper-container{
  width: 100%;
  box-sizing: border-box;
  display: flex;
}
.del-btn{
    position: relative;
    border: 1px solid #004CA7;
    border-radius: 4px;
    color: #004CA7;
    font-size: 12px;
    flex-shrink: 0;
    padding: 6px 16px;
    margin-right:16px;
    span{
        &:nth-child(2){
            position: absolute;
            top: 0px;
            right: 4px;
            cursor: pointer;
        }
    }
    }
/deep/.search-container-item {
  margin-right: 30px;
}
.tree{
    position: relative;
    .hr{
        position: absolute;
        width: 1px;
        height: 58px;
        background: #fff;
        left: 27px;
        bottom: -17px;
    }
}

.left{
    width: 355px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 27px 20px 0 0;
    border-right: 2px solid #004CA7;
}
.el-tree{
    margin-top: 20px;
    color: #004CA7;
    /deep/.el-tree-node__label{
        font-size: 16px;
    }
    /deep/.treeitem:first-child{
        font-weight: bold
    } 
    /deep/.el-tree-node__expand-icon{
                color: #004CA7;
            }
    /deep/.el-tree-node.is-current>.el-tree-node__content{
        color: #004CA7;
        background-color:#fff ;
    }
    /deep/.el-tree-node__content{
        height: 36px;
    }
    /deep/.el-tree-node__content:hover {
        background-color: #fff;
    }
    /deep/.el-tree-node{
        position: relative;
        padding-left: 16px;
    }
    /deep/.el-tree-node__children{
        padding-left: 16px;
    }
    //竖线
    /deep/.el-tree-node::before{
        content:'';
        height:100%;
        width:1px;
        position: absolute;
        left: 27px;
        top: 17px;
        // border-width: 1px;
        // border-left:1px dashed rgba(0,76,167,0.39) ;

    }
    //当前最后一个节点的竖线高度固定
    /deep/.el-tree-node:last-child::before{
        height: 36px;
        border: none;
    }
    //横线
    /deep/.el-tree-node::after{
        content:'';
        height:20px;
        width:24px;
        position: absolute;
        left: -3px;
        top: 17px;
        // border-width: 1px;
        // border-top:1px dashed rgba(0,76,167,0.39) ;
    }
    /deep/[role=treeitem]{
        padding-bottom: 26px;
    }
}
.choseList{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  h1{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FF3819;
    margin-left: 33px;
  }
}
.right{
    padding-left: 24px;
    width: calc(100% - 330px);
}
.width70{width: 70px;}
.item-name {
  color: #004ca7;
}
/deep/.el-dialog__body{
    padding-top: 0;
}
.table-container {
  margin-top: 30px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>

